<template>
	<view>
		<maps :pointList="pointList" :checkPoint='checkedPoint'></maps>
		<navbar></navbar>
		<div class="container">
			<ul class="typeSlide">
				<li class='monitor' :class='{typeSlideAct:typeSlideIndex==1}'> <span @click='typeSlideClick(1)' class='typeSlide1' >监测</span>
					<ul class="itemSlide" v-show="showSlide">
						<li v-for="(item,index) in typeList" @tap.stop="switchover(index)" :key="index"
							:class="index==indexs? 'box':''"><span :class="'itemSlide'+index">{{item}}</span></li>
					</ul>
				</li>
				<li class='drop' :class='{typeSlideAct:typeSlideIndex==2}' ><span  class='typeSlide2'  @click='typeSlideClick(2)' >积水<br>险情</span></li>
				<li :class='{typeSlideAct:typeSlideIndex==3}'><span @click='typeSlideClick(3)'  class='typeSlide3' >工程<br>险情</span></li>
			</ul>
			<component v-bind:is="currentView" ref="popup" @mapList="showPoint" @check="checkItemChoose"></component>
		</div>
		<!-- 底部导航 -->
		<u-tabbar :list="tabbarList" height="40px"></u-tabbar>
	</view>
</template>

<script>
	import maps from "../../components/common/map.vue";
	import rainfall from "./rainfall/index.vue";
	import Inflow from "./Inflow/Inflow.vue";
	import reservoir from "./reservoir/reservoir.vue"
	import pipeNetwork from "./pipeNetwork/pipeNetwork.vue"
	import hydrops from "./hydrops/hydrops.vue"
	import rain from "./rain/rain.vue"
	import waterDanger from "./waterDanger/waterDanger.vue"
	import engineeringDanger from "./engineeringDanger/engineeringDanger.vue"

	export default {
		data() {
			return {
				indexs: 0,
				typeList: ['降水', '来水', '水库', '河道', '管网', '积水'],
				currentView: 'rain', //默认为降水组件
				array: ['rain', 'Inflow', 'reservoir', 'rainfall', 'pipeNetwork', 'hydrops'],
				pointList: [],
				checkedPoint:{},
				showSlide: false,
				typeSlideIndex:1,
			}
		},
		components: {
			maps,
			rainfall,
			Inflow,
			reservoir,
			pipeNetwork,
			hydrops,
			rain,
			waterDanger,
			engineeringDanger
		},
		computed: {
			tabbarList() {
				return this.$store.state.common.tabbarList
			}
		},
		methods: {
			typeSlideClick(index) {
				this.typeSlideIndex = index
				if (index== 1) {
					this.showSlide = !this.showSlide
				} else if (index== 2) {
					this.currentView = 'waterDanger'
				}  else if (index== 3) {
					this.currentView = 'engineeringDanger'
				}
			},
			switchover(index) {
				this.indexs = index
				this.currentView = this.array[this.indexs]
			},
			showPoint(data) {
				this.pointList = data
			},
			checkItemChoose:function(item,type){
				this.checkedPoint=item;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {

		.typeSlide,
		.itemSlide {
			position: absolute;
			right: 20px;
			top: 100rpx;
			border-radius: 16rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 4px 16px 0px rgba(29, 99, 182, 0.24);
			width: 41px;

			li {
				width: 100%;
				height: 132rpx;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				position: relative;

				span {
					display: block;
					width: 100%;
					height: 100%;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					font-size: 24rpx;
					position: absolute;
					top: 29px;
					left: 9px;
					color: #999999;
					line-height: 32rpx;
				}

			}

			li span::before {
				content: '';
				width: 44rpx;
				height: 44rpx;
				// background: url(image/icon_monior.png) no-repeat center;
				background-size: 100% 100%;
				position: absolute;
				    top: -21px;
						left: 1px;
						
			}

			li::after {
				content: '';
				height: 1px;
				width: 56rpx;
				background-color: rgb(0, 0, 0);
				opacity: 0.102;
				;
				position: absolute;
				bottom: 0px;
				left: 7px;
			}

			li .typeSlide1::before {
				background: url(image/icon_monior.png) no-repeat center;
				background-size: 100% 100%;
			}

			li .typeSlide2::before {
				background: url(image/icon_drop.png) no-repeat center;
				background-size: 100% 100%;
			}

			li .typeSlide3::before {
				background: url(image/icon_enginner.png) no-repeat center;
				background-size: 100% 100%;
			}
			
			.typeSlideAct .typeSlide1::before {
				background: url(image/icon_monior_s.png) no-repeat center;
				background-size: 100% 100%;
			}
			
			.typeSlideAct .typeSlide2::before {
				background: url(image/icon_drop_s.png) no-repeat center;
				background-size: 100% 100%;
			}
			
			.typeSlideAct .typeSlide3::before {
				background: url(image/icon_enginner_s.png) no-repeat center;
				background-size: 100% 100%;
			}
			.typeSlideAct span {
				color:#4e7bef;
			}
			.monitor {
				height: 106rpx;
				span {
					top: 29px;
				}
			}

			
		}

		.itemSlide {
			// background-color: #fff;
			right: 0;
			top: 100rpx;
			z-index: 9;
			padding-bottom: 10px;
			li {
				background-color: rgba(78, 123, 239,.102);
				background: #edf2fd;
				height: 100rpx;
				color: #999999;
				width: 30px;
				margin: 0 auto;
				
				span {
					color: #999999!important;
					top: 18px;
					left: 4px;
				}
			}
			.box {
				span {
					color: #4e7bef!important ;
					 top: 29px;
					left: 4px;
			
				}
			}
			li span::before {
				content: '';
				width: 40rpx;
				height: 40rpx;
				// background: url(image/icon_monior.png) no-repeat center;
				background-size: 100% 100%;
				position: absolute;
				top: -21px;
				left: 1px
			}
			
			
			li .itemSlide0::before {
				background: url(image/icon_rain.png) no-repeat center;
				background-size: 100% 100%;
			}
			li .itemSlide1::before {
				background: url(image/icon_comwater.png) no-repeat center;
				background-size: 100% 100%;
			}
			li .itemSlide2::before {
				background: url(image/icon_reverise.png) no-repeat center;
				background-size: 100% 100%;
			}
			li .itemSlide3::before {
				background: url(image/icon_river.png) no-repeat center;
				background-size: 100% 100%;
			}
			li .itemSlide4::before {
				background: url(image/icon_pipe.png) no-repeat center;
				background-size: 100% 100%;
			}
			li .itemSlide5::before {
				background: url(image/icon_drops.png) no-repeat center;
				background-size: 100% 100%;
			}
			
			.box .itemSlide0::before {
				background: url(image/icon_rain_s.png) no-repeat center;
				background-size: 100% 100%;
			}
			.box .itemSlide1::before {
				background: url(image/icon_comwater_s.png) no-repeat center;
				background-size: 100% 100%;
			}
			.box .itemSlide2::before {
				background: url(image/icon_reverise_s.png) no-repeat center;
				background-size: 100% 100%;
			}
			.box .itemSlide3::before {
				background: url(image/icon_river_s.png) no-repeat center;
				background-size: 100% 100%;
			}
			.box .itemSlide4::before {
				background: url(image/icon_pipe_s.png) no-repeat center;
				background-size: 100% 100%;
			}
			.box .itemSlide5::before {
				background: url(image/icon_drops_s.png) no-repeat center;
				background-size: 100% 100%;
			}
			
			li::after {
				display: none;
			}

			li::before {
				display: none;
			}


		}
	}
</style>
